<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>编辑器</title>
		<!-- Editor css... -->
        <link rel="stylesheet" href="/editor/examples/css/style.css" />
        <link rel="stylesheet" href="/editor/css/editormd.css" />
        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
        <script src="/editor/examples/js/jquery.min.js"></script>
        <script src="/editor/editormd.js"></script>   
        
		<script src="/layui/layui.js"></script>
		<script src="/layui/xm-select.js"></script>	
		<script src="/js/showdown.min.js"></script>
	</head>
	<style type="text/css">
		html {
			background-color:#ddd;	
		}
		.main{
			background-color:#ddd;
			width:100%;
		}
		body{
		overflow-x:hidden}
		.article-title{
			text-align: center;
    		padding: 2px 0px 8px 0px;
		}
		#select01{
			width:100%;
			height:50px;
			
			padding: 7px 8px 7px 8px;
		}
		#select02{
			
		}
		#articleTitle{
			float:left;
			height:36px;
			width:24%;
			margin-right: 5px;
			padding-left: 5px;
		}
		#articleAbstracts{
			float:left;
			height:36px;
			width:25%;
			margin-right: 14px;
			padding-left: 5px;
		}
		#demo1{
			float:left;
			height:38px;
			width:18%;
			border-radius: 3px;
			margin-right: 5px;
		}
		#returnHome{
			float:left;
			height:37px;
			width:10%;
			border-radius: 3px;
			margin-right: 5px;
			background-color: white;
			color: #ca0c16;
   			border: 1px solid #ca0c16;	
		}
		#draftArticle{
			float:left;
			height:37px;
			width:10%;
			border-radius: 3px;
			margin-right: 6px;	
			background-color: yellow;
		}
		#publishArticle{
			float:left;
			height:37px;
			width:10%;
			border-radius: 3px;
			background-color: #ca0c16;	
			color:white;
		}
		
	</style>
	<body>
		<div class="main"> <!-- 主干  -->
			<div class="title-abs">  
				<!-- 当前文章id -->
				<input type="hidden" name="articleId" th:value="${articleId}" id="articleId" />
				<!-- 标题摘要模块  -->
				<div id="select01" class="layui-row layui-col-space10">
				<!-- 标题 -->
	    			<div>
						<div id="select02" class="layui-input-block">                                                           <!--margin-left: -22px; padding-left: 10px;style="border: 0px;width: 96%;height: 34px;" -->
							<input id="articleTitle" th:value="${articleTitle}" type="text" name="title" required  placeholder="请输入文章标题" >
						</div>
	    			</div>
	    			
	    		<!-- 摘要   -->
					<div id="select03" >
						<div id="select02" class="layui-input-block">    
							<input id="articleAbstracts" th:value="${articleAbstracts}"  type="text" name="title" required  placeholder="请输入文章摘要" autocomplete="off" class="layui-input">
						</div>
					</div> 
	    			
	    		 <!-- 标签 -->
		    		<div >
					      	<div id="demo1"></div>
		    		</div>
	    			
	    			<script th:inline="javascript">
	    			var list = [[${Tag}]];
	  				var data = [];
	  				var tagIdList=[[${tagIdList}]]
	  				//给列表赋值
	    			for(let i=0;i<list.length;i++){
	    				data.push({name: list[i].tagName, value:list[i].tagId}); 
	    			}
	  				//回显
	  				if(tagIdList!=null){
		    			for(let i=0;i<data.length;i++){
		    				for(let j=0;j<tagIdList.length;j++){
								if(data[i].value==tagIdList[j]){
									data[i]={name: list[i].tagName, value:list[i].tagId, selected:true};
								}
		    				}
		    			}
	  				}
	    			console.log(data)
	    		    var demo1 = xmSelect.render({
							// 这里绑定css选择器
							el: '#demo1', 
							// 渲染的数据
							data: data,
					})
					</script>
					
		    		<div id="enter01"><!-- 按钮 -->	
			    		<button id="returnHome" type="button">返回个人中心</button>		
			    		<button id="draftArticle" type="button" >存为草稿</button>
						<button id="publishArticle" type="button" >发布文章</button>
					</div>	
	    		
				</div> 
  			</div>
  			
  			<!-- 编辑器模块  -->
  			<div id="myEditormd" > <!-- style="margin-top: -26px;" -->
				<textarea id="myText" name="myText" class="markdown-textarea"
					  th:utext="${contents!=null and contents.pcContent !=null}?${contents.pcContent}: ''"></textarea>						
			</div>	
		</div>

		<script type="text/javascript">
		
		//獲取文章id
		var articleId=$("#articleId").val();
		//markdown编辑器
		var testEditor;
		$(function() {
			testEditor = editormd("myEditormd", {
				width   : "100%",
				height  : 560,
				syncScrolling : "single",
				path    : "/editor/lib/", //依赖lib文件夹路径    
				saveHTMLToTextarea : true,
				htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启 

				emoji : true,
				taskList : true,
	            tocm     : true,
				imageUpload: true,
	            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
	            imageUploadURL: "/article/uploadfile"		//上传图片控制器Mapping
			});        
		});
		


		//发布文章
		$("#publishArticle").click(function(){
			var tag_list = demo1.getValue();
			var tagList = [];
			for(var i=0;i<tag_list.length;i++){
				var tagName = tag_list[i].name;
				tagList.push(tagName);
			}
			if (confirm("确定发布吗？")==true){ 
				 if(tagList.length<=3&&tagList.length!=0){
					 $.ajax({
							"url" : "/article/publish",
						    "data" : {"tag":tagList,"abstracts":$("#articleAbstracts").val(),
						    	      "title":$("#articleTitle").val(), "pcContent":$("#myText").val(),"articleId":articleId},
						    "type" : "POST",    
						    "traditional": true,
						    "dataType" : "json",
						    success : function() {
						    	alert("发布成功")
						    	window.location.href = '/';
						    }
						})
				 }else if(tagList.length>3){
					 alert('标签不能超过3个');
				 }else if((tagList.length==0)){
					 alert('请选择标签，但不要超过3个')
				 }
				 
				 }

		})
		//存为草稿
		$("#draftArticle").click(function(){
			var tag_list = demo1.getValue();
			var tagList = [];
			for(var i=0;i<tag_list.length;i++){
				var tagName = tag_list[i].name;
				tagList.push(tagName);
			}

			if (confirm("确定保存为草稿吗？")==true){ 
				$.ajax({
					"url" : "/article/modify",
					"data" : {"tag":tagList,"abstracts":$("#articleAbstracts").val(),"articleId":articleId,
					    	  "title":$("#articleTitle").val(), "pcContent":$("#myText").val()},
					"type" : "POST",    
					"traditional": true,
					"dataType" : "json",
					 success : function() {
					    alert("保存成功");
					    window.location.href = '/user/userinfo';
					 }
				})
			}

		})
		
		//返回个人中心
		$("#returnHome").click(function(){
       	 window.location.href = '/user/userinfo';
   		})
		</script>
	</body>
</html>


